<template>
	<view>
		<!-- 标题 -->
		<view class="navbar">
			<u-icon @click="navigateBack" class="icon-left" name="arrow-left" color="#fff" size="50"></u-icon>
			<text>设备列表</text>
		</view>
		<!-- 内容 -->
		<view class="section">
			<view class="mation-info" v-for='(item,idx) in deviceList' :key='idx'>
				<image v-show="item.id!=choosedCheckId" @click="change(item)" class="check"
					src="https://srmzln.oss-cn-hangzhou.aliyuncs.com/znl/images/check.png" mode=""></image>
				<image v-show='item.id===choosedCheckId' @click="change(item)" class="check"
					src="https://srmzln.oss-cn-hangzhou.aliyuncs.com/znl/images/checkbox.png" mode=""></image>
			<!-- 	<image class="portrait" :src="item.headurl" mode=""></image> -->
				<image class="portrait" src="../../../static/images/default_avatar.jpg" mode=""></image>
				<text class="nickname">{{item.name}}</text>
				<view class="state">
					<text v-if="item.status===1" @click="unload">在线</text>
					<text v-else @click="unload">离线</text>
					<u-icon v-if="item.status===1" @click="unload" name="wifi" color="rgb(63,87,220)" size="50"></u-icon>
						<u-icon v-else @click="unload" name="wifi-off" color="rgb(102,102,102)" size="50">
					</u-icon>
				</view>
			</view>

			<!-- 用户点击确定 -->
			<view class="binding" @click="jump">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				choosedDeviceNo:'',
				choosedCheckId: '',
				deviceList: [],
				check: true,
				check1: true,
				check2: true,
				unloadImg: true,
				unloadImg1: true,
				unloadImg2: true
			}
		},
		mounted() {
			this.getDevice()
		},
		methods: {
			async getDevice() {

				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let res = await this.$api.getDeviceList();

				if (res.code == 200) {
					console.log(res, 88)
					this.deviceList = res.result.list
					this.deviceList.forEach((ele=>{
						if(ele.deviceStatus==='Y'){
							this.choosedCheckId = ele.id
							this.choosedDeviceNo = ele.device_code
						}
					}))
				} else {


				}
				uni.hideLoading();


			},
			navigateBack() {
				uni.reLaunch({
					url: '../index'
				})
			},
			jump() {
				if(this.choosedCheckId){
						
					this.$api.changeDevice({deviceid:this.choosedCheckId,deviceno:this.choosedDeviceNo}).then(res=>{
							
						if(res.code===200){
							uni.reLaunch({
								url: '../index'
							})
						}
					})
				}
				
				// uni.reLaunch({
				// 	url: '../index'
				// })
			},
			change: function(item) {
				if (!this.choosedCheckId) {
					this.choosedCheckId = item.id
					this.choosedDeviceNo = item.device_code
				} else {
					if (this.choosedCheckId === item.id) {
						this.choosedCheckId = ''
						this.choosedDeviceNo = ''
					} else {
						this.choosedCheckId = item.id
						this.choosedDeviceNo = item.device_code
					}
				}

			},

			change1: function() {
				undefined
				this.check1 = !this.check1
			},
			change2: function() {
				undefined
				this.check2 = !this.check2
			},
			unload: function() {
				undefined,
				this.unloadImg = !this.unloadImg
			},
			unload1: function() {
				undefined,
				this.unloadImg1 = !this.unloadImg1
			},
			unload2: function() {
				undefined,
				this.unloadImg2 = !this.unloadImg2
			}
		}
	}
</script>

<style scoped lang="scss">
	// 头部
	.navbar {
		padding-top: 90rpx;
		padding-bottom: 30rpx;
		width: 750rpx;
		background-color: rgb(63, 87, 220);
	}

	.navbar>text {
		font-size: 36rpx;
		font-weight: bold;
		padding-left: 220rpx;
		color: #fff;
	}

	.icon-left {
		margin-top: 20rpx;
		margin-left: 10rpx;
	}

	// 内容
	.section {
		padding: 30rpx;
		background-color: rgb(243, 243, 243);
		font-size: 40rpx;
		padding-bottom: 570rpx;
	}

	.mation-info {
		background-color: #fff;
		border-radius: 30rpx;
		padding: 30rpx;
		position: relative;
		margin-bottom: 50rpx;
	}

	.check {
		width: 50rpx;
		height: 50rpx;
		margin-bottom: 20rpx;
		margin-left: 20rpx;
	}

	.portrait {
		width: 100rpx;
		height: 100rpx;
		margin-left: 80rpx;
		border-radius: 50%;
	}

	.nickname {
		position: absolute;
		top: 32%;
		left: 42%;
	}

	.state {
		position: absolute;
		right: 10%;
		top: 32%;
	}

	.state>text {
		margin-right: 10rpx;
	}

	.binding {
		box-shadow: 1px 1px 2px rgb(228, 227, 227), 0 0 5px rgb(228, 227, 227), 0 0 1px rgb(228, 227, 227);
		border-radius: 50rpx;
		text-align: center;
		margin-bottom: 35rpx;
		padding: 20rpx;
		font-size: 36rpx;
		background-color: rgb(68, 92, 223);
		color: #fff;
		margin-top: 100rpx;
	}

	input {
		font-size: 32rpx;
		display: inline-block;
		float: right;
		width: 100rpx;
		color: #909399;
	}
</style>
